{{template "../public/page_header.html" .}}
<!--end header -->
<link rel="stylesheet" href="/static/frontend/css/pay.css"/>
<script src="/static/frontend/js/bootstrap.js"></script>
<link rel="stylesheet" href="/static/backend/bootstrap/css/bootstrap.css">
<!-- start banner_x -->
<div class="banner_x center clearfix">
    <a href="/" target="_blank">
        <div class="logo fl"><img src="/static/frontend/image/logo_top.png"></div>
    </a>
    <div class="my_cart fl ml40">支付页面</div>
</div>

<div class="page-main">
    <div class="checkout-box">
        <div class="section section-order">
            <div class="order-info clearfix">
                <div class="fl">
                    <h2 class="title">订单提交成功！请继续付款～</h2>
                    <p class="order-time" id="J_deliverDesc"></p>
                    <p class="order-time">请在<span class="pay-time-tip">47小时59分</span>内完成支付, 超时后将取消订单</p>
                    <p class="post-info" id="J_postInfo">
                        收货信息：{{.order.Name}} {{.order.Phone}} &nbsp;&nbsp; {{.order.Address}} </p>
                </div>
                <div class="fr">
                    <p class="total">
                        应付总额：<span class="money"><em>{{.order.AllPrice}}</em>元</span>
                    </p>
                    <br>
                    <br>
                    <a href="javascript:void(0);" class="show-detail" id="J_showDetail"
                       data-stat-id="db85b2885a2fdc53">订单详情</a>
                </div>
            </div>
            <i class="iconfont icon-right">√</i>
            <div class="order-detail">
                <ul>
                    <li class="clearfix">
                        <div class="content">
                            <strong>订单号：</strong> <span class="order-num">{{.order.OrderId}}</span>
                        </div>
                    </li>
                    <li class="clearfix">
                        <div class="content">
                            <strong>收货信息：</strong>{{.order.Name}} {{.order.Phone}} &nbsp;&nbsp; {{.order.Address}}
                        </div>
                    </li>
                    <li class="clearfix">
                        <div class="content">
                            <strong>商品名称：</strong>
                        {{range $key,$value:=.orderItem}}
                            <p>{{$value.ProductTitle}} {{$value.ProductVersion}} {{$value.ProductColor}}
                                数量：{{$value.ProductNum}} 价格：{{$value.ProductPrice}}</p>
                        {{end}}
                        </div>
                    </li>
                    <li class="clearfix hide">
                        <div class="label">配送时间：</div>
                        <div class="content">
                            不限送货时间
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="section section-payment">
            <div class="cash-title" id="J_cashTitle">
                选择以下支付方式付款
            </div>
            <div class="payment-box ">
                <div class="payment-body">
                    <ul class="clearfix payment-list J_paymentList J_linksign-customize">
                        <li id="weixinPay">
                            <img src="/static/frontend/image/weixinpay.png" alt="微信支付"/>
                        </li>
                        <li id="alipay">
                            <a href="/alipay?id={{.order.Id}}" target="_blank"><img
                                    src="/static/frontend/image/alipay.png" alt="支付宝"/></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        $(".show-detail").click(function () {
            $(".order-detail").slideToggle();
        })
        $("#weixinPay").click(function () {
            $('#weixinPayModel').modal('show');
        })
        $("#alipay").click(function () {
            $('#alipayModel').modal('show');
        })
        $("#alipayDone").click(function () {
            location.href = "/user/order"
        })
        setInterval(function () {
            $.get('/buy/orderPayStatus?id={{.order.Id}}', function (response) {
                console.log(response);
                if (response.success) {
                    location.href = '/user/order'
                }
            })
        }, 5000);
    })
</script>

<!-- 微信支付 -->
<div class="modal fade" id="weixinPayModel" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">微信支付</h4>
            </div>
            <div class="modal-body">
                <img class="lcode" src="/wxpay?id={{.order.Id}}"/>
                <img class="rphone" src="/static/frontend/image/phone.png"/>
            </div>
        </div>
    </div>
</div>
<!-- 支付宝支付 -->

<div class="modal fade" id="alipayModel" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">在线支付提醒</h4>
            </div>
            <div class="modal-body">
                感谢您的支持，支付完成后，页面会自动跳转到订单页面，若需要重新支付请点击“继续支付”按钮，若已完成支付请点击“已完成支付”
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">继续支付</button>
                    <button type="button" class="btn btn-primary" id="alipayDone">已完成支付</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- footer -->
<footer class="center">
    <div class="mt20">LeastMall商城|隐私政策|Select Region</div>
    <div>LeastMall商城 蜀ICP证xxxxxxx号 蜀ICP备xxxxxxxxxxx号 蜀公网安备xxxxxxxxxxxxx号</div>
</footer>
</body>
</html>